<template>
  <view :class="layerHidden ? 'layer-hidden' : ''" class="mycont">
    <view class="example-body">
		
      <view class="searchs">
        <view class="left">
          <view class="selects">
            <u-icon class="map" name="map"></u-icon>
            <pickerAddress
              ref="addr"
              @fnpickerAddress="fnpickerAddress"
              class="inp"
            ></pickerAddress>
            <u-icon color="#efefef" class="icons" name="arrow-down"></u-icon>
          </view>

          <u-search
            @click="goSearch"
            class="search"
            bg-color="#F7F8FA"
            placeholder="百万职位 劳动力信息系统"
            shape="square"
            disabled=""
            :show-action="true"
            action-text="搜索"
            :animation="true"
          >
          </u-search>
        </view>
		
		
        <view class="right" @click="scan">
          <view v-if="cirleShow" class="circle"></view>
          <image
            class="bell"
            src="https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/home/xiaoxi.png"
            mode="widthFix"
          ></image>
        </view>
		
      </view>

      <navlist></navlist>
      <!-- #ifdef H5 -->

      <view class="container">
        <u-sticky :offset-top="0" :enable="enable">
          <!-- 只能有一个根元素 -->
          <view class="sticky">
            <view class="tabs">
              <u-tabs
                class="main"
                :item-width="10"
                :list="tablist"
                :is-scroll="false"
                :current="current"
                @change="changeTab"
              ></u-tabs>
              <view class="black"></view>
            </view>
          </view>
        </u-sticky>
        <myitem :list="list" />
      </view>
      <!-- #endif -->

      <!-- #ifdef MP-WEIXIN -->
      <view class="container">
        <u-sticky :offset-top="100" :enable="enable">
          <!-- 只能有一个根元素 -->
          <view class="sticky">
            <view class="tabs">
              <u-tabs
                class="main"
                :item-width="10"
                :list="tablist"
                :is-scroll="false"
                :current="current"
                @change="changeTab"
              ></u-tabs>
              <view class="black"></view>
            </view>
          </view>
        </u-sticky>
        <myitem v-if="list.length" :list="list" />
        <u-empty class="empty" v-else text="暂无数据" mode="list"></u-empty>
        <u-loadmore
          v-if="list.length != 0"
          :status="status"
          @loadmore="loadmore"
        ></u-loadmore>
      </view>
      <!-- #endif -->
    </view>
  </view>
  
  
  
  
</template>

<script>
import pickerAddress from "@/components/citys/pickerAddress.vue";
import navlist from "./navList.vue";
import myitem from "../../components/list/gdzg.vue";
import api from "../../api/routes.js";
import { mapGetters, mapMutations } from "vuex";
export default {
  components: {
    pickerAddress,
    navlist,
    myitem,
  },
  computed: {
    ...mapGetters(["citiesInfor"]),
  },
  data() {
    return {
      layerHidden: false,
      cirleShow: true,
      enable: true,
      tablist: [
        {
          name: "推荐",
        },
        {
          name: "最新",
        },
        {
          name: "热招",
          count: "hot",
        },
      ],
      current: 0,
      page: 1,
      limit: 10,
      cityArr: [],
      orderSort: 3,
      status: "loadmore",
      list: [],
      // 拿到的数据总条数
      total: 0,
      //判断是否发送请求的条件
      load: false,
      workType: "",
    };
  },
  // 在对应的show和hide页面生命周期中打开或关闭监听
  onShow() {
    uni.removeStorageSync("city");
    this.enable = true;

    if (this.$store.state.siteRecruitmentPage) {
    } else {
      const value = uni.getStorageSync("city1");
     
      if (value) {
        let val = this.$store.state.city?this.$store.state.city:'全国'
        if (value != val) {
          this.list = [];
          this.page = 1;
          this.getList();
        }
      } else {
        this.list = [];
        this.page = 1;
        this.getList();
      }
    }

    this.setSearchPage(0);
    this.setfindWorkersPage(0);
  },
  onHide() {
    this.enable = false;
  },

  onReachBottom() {
    if (this.status === "loadmore") {
      this.loadmore();
    }
  },
  methods: {
    ...mapMutations(["setSearchPage", "setfindWorkersPage"]),
    goSearch() {
      uni.navigateTo({
        url: "/package/pages/searchJob/comSearch/comSearch1",
      });
    },

    scan() {
      this.cirleShow = false;
      uni.navigateTo({
        url: "/package/pages/searchJob/notice",
      });
    },

    fnpickerAddress(val) {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 50,
      });
      this.list = [];
      this.page = 1;
      val.status ? uni.hideTabBar() : uni.showTabBar();
      this.layerHidden = val.status;
      if (val.loadDate) {
        this.getList();
      }
    },
    async getList() {
      // 判断当前是否在请求，如果为true正在请求数据，就让他返回空，如果为false没在请求，就让它开始请求数据
      if (this.load) {
        return;
      }
      this.load = true;
      // 请求数据时，状态改为加载中状态
      this.status = "loading";
      const res = await this.$myRequest({
        url: api.pageJobList,
        method: "POST",
        data: {
          page: this.page,
          limit: this.limit,
          key: this.keyword, //搜索关键词
          classify: this.classify, //分类(hours:小时工,stu:学生专区,factory:工厂,local:本地工作,build:建筑招工,fitup:装修energy:能源,other:其他)
          type: "2", //1:找工作模块 2:工地招工
          orderSort: this.orderSort, //1:热门,2:最新,3:推荐，热门
          province: this.citiesInfor[0], //省
          city: this.citiesInfor[1], //市
          district: this.citiesInfor[2], //区
          workType: this.workType, //工种ID
        },
      });
	  console.log(res,"岗位详情吗");

      this.load = false;

      if (res.data.code !== 0) {
        return uni.showToast({
          title: res.msg,
          icon: "none",
        });

        this.status = "nomore";
      }

      this.total = res.data.page.totalCount;

      this.list = [...this.list, ...res.data.page.list];

      this.ismore();
    },

    ismore() {
      if (this.total === this.list.length) {
        this.status = "nomore";
      } else {
        this.status = "loadmore";
      }
    },

    loadmore() {
      this.page++;
      this.getList();
    },

    changeTab(index) {
      this.current = index;
      if (index == 0) {
        this.orderSort = 3;
      } else if (index == 2) {
        this.orderSort = 1;
      } else {
        this.orderSort = 2;
      }

      uni.pageScrollTo({
        scrollTop: 0,
        duration: 50,
      });
      this.list = [];
      this.page = 1;
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.search {
  flex: 1;
}
.empty {
  display: block;
  margin: 100px auto 0;
}
.sticky {
  width: 750rpx;
  color: #fff;
  background: #ffffff;
}

.tabs {
  width: 100%;
  display: flex;

  .main {
    flex: 1;
  }

  .black {
    width: 250rpx;
  }
}

.searchs {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  height: 100rpx;
  top: 0;
  z-index: 1;
  padding: 20rpx 0 20rpx 0;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .left {
    position: relative;
    background: #ffffff;
    flex: 1;
    margin-right: 20rpx;
    margin-left: 20rpx;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    // .line {
    // 	color: #f2f2f2;
    // 	margin: 0 0 0 15rpx;
    // }
    font-size: 13px;

    /deep/.uni-input-input {
      font-size: 10px;
    }

    .selects {
      width: 140rpx;
      margin-right: 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 13px;

      .map {
        font-size: 18px;
        color: #d9d9d9;
      }

      .inp {
        flex: 1;
        // text-align: center;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
    }
  }

  .right {
    position: relative;
    width: 25px;
    margin-right: 10rpx;
    color: #333;
    .bell {
      width: 20px;
      height: 20px;
    }
    .circle {
      width: 14rpx;
      height: 14rpx;
      background: #ff0000;
      position: absolute;
      border-radius: 50%;
      z-index: 9;
      right: 4px;
      top: -1px;
    }
  }
}
</style>
